<template>
  <div class="common-choose-dialog-wrap">
    <span class="label" @click="showDialog" v-if="!tempVal" :style="{'--theme-color': systemInfo.theme}">请选择</span>

    <el-tag
        v-else
        style="cursor: pointer"
        type="success"
        closable
        @close="handleClose"
        @click="showDialog"
    >{{ tempVal }}
    </el-tag
    >

    <common-choose-dialog
        ref="ChooseDialog"
        :title="title"
        @submitForm="submitForm"
    >
      <common-tree
          slot="tree"
          :isRequest="isRequest"
          :treeLoading="treeLoading"
          :treeData="treeData"
          :treeProp="{ isLeaf: 'leaf' }"
          :current-node-key="currentNodeKey"
          :isShowFilter="false"
          setNodeByKey="leaf"
          isShowIconForNoChild
          is-slot
          @handleNodeClick="handleNodeClick"
      >
        <div slot-scope="{ scope }" class="tree-item-wrap">
          <common-carousel-text :content="scope.data.name" :font-size="14"/>
        </div>
      </common-tree>

      <common-search slot="search" @search="handleQuery" @reset="resetQuery">
        <el-form
            @submit.native.prevent
            :model="queryForm"
            ref="queryForm"
            :inline="true"
            label-width="85px"
        >
          <el-form-item label="看板名称">
            <common-input
                v-model="queryForm.name"
                clearable
                @enter="handleQuery"
            />
          </el-form-item>
        </el-form>
      </common-search>

      <common-table
          v-loading="listLoading"
          slot="content"
          ref="allList"
          :data="allList"
      >
        <el-table-column width="55" align="center">
          <template slot-scope="scope">
            <el-radio-group v-model="isCheckValue" @change="changeRadio">
              <el-radio :label="scope.row.id">{{ '' }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column
            label="看板名称"
            align="left"
            prop="name"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="状态" align="left" prop="time">
          <template slot-scope="{ row }">
            <el-tag type="success" v-if="row.status === 0">启用</el-tag>
            <el-tag type="danger" v-else-if="row.status === 1">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="描述"
            align="left"
            prop="kanbanDescribe"
            width="250"
            show-overflow-tooltip/>
      </common-table>
      <pagination
          slot="pagination"
          v-show="total > 0"
          :total="total"
          :page.sync="queryForm.pageNum"
          :limit.sync="queryForm.pageSize"
          @pagination="handleList"
      />
    </common-choose-dialog>
  </div>
</template>

<script>
import HandleChooseDialog from '@/mixins/modules/HandleChooseDialog'
import BaseList from '@/mixins/BaseList'
import HandleSubmit from "@/views/screenConfig/dataSet/components/mixin/handleSubmit"
import { _deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { getList, getTree } from '@/api/screenConfig/viewboard'

export default {
  name: 'chooseDialog',
  mixins: [HandleChooseDialog, BaseList, HandleSubmit],
  props: {
    selectName: {
      type: String,
    },//选中项名称
    selectId: {
      type: [String, Number],
    },//选中项id
  },
  data() {
    return {
      dialogShow: false,
      title: '看板',
      treeData: [],
      currentNodeKey: '',
      selectedData: [],
      queryForm: {
        id: '0',
        name: '',
        isDefault: 0,
        datasourceType: null,
        deptIds: null,
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      isCheckValue: '',
      key: 'id',
      selectRow: null,
      tempVal: ''
    }
  },
  computed: {
    ...mapGetters(['systemInfo'])
  },
  watch: {
    selectName: {
      handler: function(val) {
        if (val) {
          this.tempVal = _deepClone(this.selectName)
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
//重置筛选条件
    resetQueryForm() {
      this.queryForm = {
        id: '0',
        name: '',
        isDefault: 0,
        datasourceType: null,
        deptIds: null,
        pageNum: 1,
        pageSize: 10
      };
    },
    //部门数据
    getTreeList() {
      return new Promise((resolve, reject) => {
        getTree({}).then((res) => {
          if (res && res.code === 200) {
            let treeData = [
              {
                id: '0-0',
                name: '预定义', // 名称
                isDefault: 1, // 1 预定义 0 自定义
                isRoot: true,
                leaf: false, // false 分类 true 数据集
                children: res.data.filter((item) => item.isDefault === 1)
              },
              {
                id: '0',
                name: '自定义',
                isDefault: 0,
                leaf: false,
                isRoot: true,
                children: res.data.filter((item) => item.isDefault === 0)
              }
            ]
            this.handleList()
            resolve(treeData)
          } else {
            this.queryForm.id = ''
            reject()
          }
        })
      })
    },

    //选择列表数据
    getList() {
      return new Promise((resolve, reject) => {
        getList(this.queryForm).then((res) => {
          if (res && res.code === 200) {
            resolve({ list: res.rows, total: res.total })
          } else {
            this.allList = []
            this.total = 0
            this.handleListTips(res)
            reject()
          }
        })
      })
    },

    handleTreeList() {
      this.treeLoading = true
      this.allList = []
      this.listLoading = true
      this.getTreeList().then(res => {
        this.treeData = res
        this.currentNodeKey = '0'
      }).catch(err => {
        // 统一异常处理
      }).finally(() => {
        this.treeLoading = false
      })
    }
  },
  mounted() {
    // this.handleTreeList()
  }
}
</script>

<style scoped lang="scss">
.tree-item-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.common-choose-dialog-wrap {
  .label {
    font-size: 14px;
    color: var(--theme-color);
    cursor: pointer;
  }

  .name-list {
    cursor: pointer;

    .el-tag {
      margin-right: 4px;
    }
  }
}
</style>
